<template>
	<view class="app">
		<load :ready="ready"></load>
		<view class="nav">
			<u-subsection :list="navlist" @change="sectionChange" :current="current"></u-subsection>
		</view>
		<u-gap height="70"></u-gap>
		<view v-if="current == 0">
			<view class="tips">我的押瓶数量：<text class="col">{{num}}</text></view>
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="item.id">
					<view class="name">
						序号：{{index+1}}
					</view>
					<view class="text">
						<!-- 首次押瓶时间 -->开始使用时间：{{item.updatetime}}
					</view>
					<view class="text" v-if="item.bottle_code">
						<!-- 钢瓶编码 -->	共享瓶编码：{{item.bottle_code}}
					</view>
					<view class="text">
						<!-- 押瓶欠费 -->租金累计：{{item.bottle_rent_money}}
					</view>
					<view class="text">
						<!-- 押瓶租金 -->共享瓶押金：{{item.bottle_deposit}}
					</view>
				</view>
			</view>
			
			<list-tip :notData="listTip.notData" :isPage="listTip.isPage" :isLoading="listTip.isLoading">
			    <u-empty slot="notdata" text="暂无数据"  margin-top="100"></u-empty>
			</list-tip>
			
			<u-gap height="100"></u-gap>
			<view class="btnbox fixed">
				<u-button type="primary" shape="circle" @click="showBottleReturn = true"
					:custom-style="$config.btnStyle">退瓶</u-button>
			</view>
		</view>
		
		<view  v-if="current == 1">
			<view class="tips flex">
				<text>押瓶租金：<text class="col-red">{{bottle_rent}}元/天</text></text>
				<text class="col" @click="showRule = true">租金结算规则</text>
			</view>
			<view class="log-list">
				<view class="item" v-for="(item, index) in list" :key="item.id">
					<view class="top">
						<!-- <view class="type" style="width: 540rpx;">
							欠费类型：{{item.type}}
						</view> -->
						<view class="type" style="width: 540rpx;">
							共享瓶编码：{{item.code}}
						</view>
						<view>
							<u-tag text="待缴费" v-if="item.if_pay == 0" type='error' mode="light" />
							<u-tag text="已缴费" v-else mode="light" />
						</view>
					</view>
					<view class="num">
						开始使用时间：{{item.intervals}}
					</view>
					<view class="num">
						结束使用时间：{{item.end_time}}
					</view>
					<!-- <view class="num">
						支付日期：{{item.pay_time == 0 ? '' : item.pay_time}}
					</view> -->
					<view class="desc">
						<view class="date">
						支付日期：{{item.pay_time == 0 ? '' : item.pay_time}}
						</view>
						<view class="price">￥<text>{{item.pay_amount}}</text></view>
					</view>
				</view>
				
				<list-tip :notData="listTip.notData" :isPage="listTip.isPage" :isLoading="listTip.isLoading">
				    <u-empty slot="notdata" text="暂无数据"  margin-top="100"></u-empty>
				</list-tip>
		
			</view>
		</view>
		
	
		
			<u-modal v-model="showRule" @confirm="showRule=false" :show-cancel-button="false">
				<view style="padding: 20rpx 30rpx; font-size: 15px;">
					 <u-parse :html="content"></u-parse>
				</view>
			</u-modal>
			
				
			<u-popup v-model="showBottleReturn" :closeable="true" mode="bottom" height="400">
				<view class="bottle-wrap">
					<view class="title">退瓶方法</view>
					<view class="text">
						<!-- <u-parse :html="returnText"></u-parse> -->
						<view>请联系供应站进行退瓶</view>
						<!-- <view class="site">
							<view class="site-item" >
								<u-image src="/static/icon_site.png" border-radius="16" width="128" height="128"></u-image>
								<view class="info">
									<view class="name">
										<text class="na">{{siteMsg.name}}</text>
									</view>
									<view class="tel" @click="makePhoneCall(siteMsg.head_mobile)">
										<u-icon name="phone" color="#0093dd"></u-icon>
										<text>{{siteMsg.head_mobile}}</text>
									</view>
									<view >
										<u-button size="mini" type="success" @click="navigation(siteMsg.latitude, siteMsg.name)">
											<u-icon name="map" size="26"></u-icon>
											导航
										</u-button>
									</view>
								</view>
							</view>
						</view> -->
						<view class="desc-text">
							<view class="label">供应站名称</view>
							<view class="value">{{siteMsg.name}}</view>
						</view>
						<view class="desc-text"  @click="makePhoneCall(siteMsg.head_mobile)">
							<view class="label">供应站联系方式</view>
							<view class="value"><u-icon name="phone"></u-icon>{{siteMsg.head_mobile}}</view>
						</view>
						<view class="desc-text"  @click="navigation(siteMsg.latitude, siteMsg.name)">
							<view class="label">供应站地址</view>
							<view class="value">
								<u-icon name="map" color="#0093dd"></u-icon>
								<text style="color:#0093dd">{{siteMsg.address}}</text>
							</view>
						</view>
					</view>
					<!-- <view class="text">1.送气人员配送气瓶到家时，现场办理退瓶</view>
					<view class="text">2.携瓶到地址 (供应站地址) 办理退瓶</view>
					<view class="text">
						<text style="margin-right: 5px;">联系方式:{{phone}} </text>
						<u-button size="mini" @click="$common.makePhoneCall(this.phone)" type="success"><u-icon name="phone" size="26"></u-icon> 拨号</u-button>
					</view> -->
				</view>
			</u-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {},
		data() {
			return {
				navlist: [{
						name: '押瓶记录'
					},
					{
						name: '租金结算记录'
					},
				],
				current: 0,
				total:0,
				bottle_rent:0,
				rent:0,
				num:0,
				content:'',
				showRule:false,
				showBottleReturn:false,
				phone:'13888889999',
				list:[],
				returnText:'',
				listTip:{},
				siteMsg:{},
			};
		},
		onLoad(o) {
			if(o.current){
				this.current = o.current
			}
			this.$list.init(this);
			this.getInit();
			this.getList();
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		onUnload() {
			that = null;
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		onReachBottom: function() {
			this.$list.onReachBottom(this)
		},
		methods: {
			navigation(latitude, name=''){
				let lat = latitude.split(',')
				console.log(lat);
				console.log(lat)
			    this.$common.navigation({
					name,
					lat: lat[0],
					lng:  lat[1],
				})
			},
			makePhoneCall(num){
				this.$common.makePhoneCall(num)
			}, 	
			handleTel(){
				
			},
			async getInit() {
			    let res = {};
				// "description": "type 1（当前所押瓶） 2（缴租记录）"
			    try {
			        res = await this.$api.showMsg();
			    } catch (e) {
			        uni.hideLoading();
			        console.log('err', e);
			    }
			    if (res.data.code == this.$config.RESOK) {
					this.content = res.data.data.rent;
					this.returnText = res.data.data.return
			    } 
				let res2 = await this.$api.myBookSite();
				if (res2.data.code == this.$config.RESOK) {
					this.siteMsg = {
						...res2.data.data.siteMsg,
						address:res2.data.data.address
					};
				} 
				
			},
			async getList() {
			    let listTip = this.listTip;
			    let res = {};
			    let params = {
			        pageNum: listTip.p,
			        pageSize: listTip.size,
					type: this.current == 0 ? 1 : 2,
			    };
				// "description": "type 1（当前所押瓶） 2（缴租记录）"
			    try {
			        res = await this.$api.bottle(params);
			    } catch (e) {
			        uni.hideLoading();
			        console.log('err', e);
			    }
			    if (res.data.code == this.$config.RESOK) {
					console.log(res.data.data)
			       let list = res.data.data.bottle.data || [];
				   if(this.current == 1){
					   list.forEach(item=>{
						   item.bottle_code = JSON.parse(item.bottle_code) 
					   })
				   }
			       let setdata = this.$list.normalData(list, this);
			       this.list = setdata.list;
			       this.listTip = setdata.listTip;
				   if(this.current == 0){
					    this.num = res.data.data.bottle.total;
				   }
				    this.total = res.data.data.bottle.total;
				   this.bottle_rent = res.data.data.bottle_rent;
				   this.rent = res.data.data.rent;
			       if (setdata.list.length >= res.data.total && listTip.p > 1 || !list.length) {
			           this.$list.notdata(this);
			       } 
			    } 
			},
			sectionChange(e){
				this.current = e;
				this.$list.init(this);
				this.getList();
			},
			submit() {
				uni.$emit('selectBill', this.list[this.current]);
				this.$common.goback();
			},
			...mapActions([])
		},
		computed: {
			...mapState({
				userInfo: 'userInfo'
			})
		}
	};
</script>

<style scoped lang="scss">
	.nav{
		position: fixed;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 99;
	}
	page {
		background-color: #F8FAFD;
	}

	.list {
		.item {
			background: #fff;
			padding: 20rpx 30rpx;
			border: 2px solid #fff;
			overflow: hidden;
			position: relative;
			border-bottom: 1px solid #ddd;
			&:nth-last-child(1){
				border: 0;
			}
			.icons {
				position: absolute;
				right: 0;
				padding: 2px 5px;
				background: $color;
				bottom: 0;
				display: none;
			}

			&.active {
				.icons {
					display: block;
				}

				border-color: $color;
			}
		}

		.name {
			font-size: 14px;
			margin-bottom: 6px;
			font-weight: bold;
		}

		.text {
			margin-bottom: 6px;
		}
	}
	
	.tips{
		padding: 0 30rpx;
		background: #fff;
		height: 70rpx;
		line-height: 70rpx;
		color: #666;
		border-bottom: 12rpx solid #f5f5f5;
		&.flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	
	.log-list{
		.item{
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #ddd;
			background: #fff;
			&:nth-last-child(1){
				border: 0;
			}
		}
		.top{
			display: flex;
			justify-content: space-between;
			// align-items: center;
		}
		.num{
			font-size: 13px;
			padding: 2px 0;
		}
		.desc{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 13px;
		}
	}
	
	.bottle-wrap{
		padding: 30rpx;
		.title{
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		.text{
			margin-bottom: 5px;
			color: #666;
		}
	}
	
	.site{
		background: #fff;
		.site-item{
			border-bottom: 1px solid #ddd;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			&:nth-last-child(1){
				border: 0;
			}
		}
		.info{
			flex: 1;
			padding: 0 20rpx;
		}
		.tel{
			font-size: 13px;
			display: flex;
			align-items: center;
			margin-bottom: 2px;
			color: $color;
		}
		.name{
			font-size: 15px;
			margin-bottom: 4px;
			color: #333;
			font-weight: bold;
			display: flex;
			align-items: center;
		}
		.na{
			margin-right: 5px;
		}
		.text{
			font-size: 13px;
			color: #666;
		}
	}
	
	.desc-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #8E8E9A;
		padding: 4px 0;
	}
</style>